<template>
	<view class="content">
		
		
		<view v-if="showSelected" class="footer">
				<div 
					class="leader"
					v-for="(item, index) in leader" :key="index"
					@click="switchTab(item.pagePath)">
					<view :class="item.icon"></view>
					<p>{{item.title}}</p>
				</div>
			<!--
			<navigator url="../components/forum" open-type="switchTab">
				<div class="leader theLeft">
					<view class="iconfont icon-luntan"></view>
					<p>论坛</p>
				</div>
			</navigator>
			
			<navigator url="../components/team" open-type="switchTab">
				<div class="leader">
					<view class="iconfont icon-zudui"></view>
					<p>组队</p>
				</div>
			</navigator>
			
			<navigator url="../components/square" open-type="switchTab">
				<div class="leader" id="square">
					<view class="iconfont icon-luntan1"></view>
					<p>广场</p>
				</div>
			</navigator>
			
			<navigator url="../components/message" open-type="switchTab">
				<div class="leader">
					<view class="iconfont icon-xiaoxi"></view>
					<p>消息</p>
				</div>
			</navigator>

			<navigator url="../components/aboutMe" open-type="switchTab">
				<div class="leader theRight">
					<view class="iconfont icon-gerenzhongxin"></view>
					<p>我的</p>
				</div>
			</navigator>
			-->
		
		</view>
	</view>
</template>

<script>
	//import '../../static/font/iconFont.css'
	export default {
		data() {
			return {
				selectedIndex:0,
				showSelected:false,
				leader:[
					{
						pagePath:"../components/forum",
						icon:"iconfont icon-luntan",
						title:"论坛"
					},
					{
						pagePath:"../components/team",
						icon:"iconfont icon-zudui",
						title:"组队"
					},
					{
						pagePath:"../components/square",
						icon:"iconfont icon-luntan1",
						title:"广场"
					},
					{
						pagePath:"../components/message",
						icon:"iconfont icon-xiaoxi",
						title:"消息"
					},
					{
						pagePath:"../components/aboutMe",
						icon:"iconfont icon-gerenzhongxin",
						title:"我的"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			switchTab(url){
				uni.switchTab({
					url: url
				})
			}
		},
		watch: {
		},
	}
</script>

<style>
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 3956726 */
  src: url('https://at.alicdn.com/t/c/font_3956726_wr0rwherpj.woff2?t=1678969832176') format('woff2'),
       url('https://at.alicdn.com/t/c/font_3956726_wr0rwherpj.woff?t=1678969832176') format('woff'),
       url('https://at.alicdn.com/t/c/font_3956726_wr0rwherpj.ttf?t=1678969832176') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 1.5rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-luntan:before {
  content: "\e667";
}

.icon-luntan1:before {
  content: "\e616";
}

.icon-zudui:before {
  content: "\e615";
}

.icon-xiaoxi:before {
  content: "\e600";
}

.icon-gerenzhongxin:before {
  content: "\e601";
}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #495094;
	}
	.footer{
		background-color: green;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.leader{
		width: 45px;
		height: 100%;
		background-color: blue;
		display: flex;
		flex-direction: column;
		align-items: center
	}
	.leader>p{
		bottom: 0;
		font-size: 0.7rem;
	}
	.theLeft{
		margin-left: 5px;
	}
	.theRight{
		margin-right: 5px;
	}
	#square{
		height: 90%;
		border-radius: 18px;
		background-color: #54a0ff;
	}
</style>
